
<template>
  <div class="employeecontainer">
    <header-slot class="header">
      <template v-slot:left>
        <el-alert title="一共有n条记录" type="info" show-icon :closable="false"></el-alert>
      </template>
      <template v-slot:right>
        <el-button type="primary" size="small" @click="handleDownload">excel普通导出</el-button>
        <el-button type="success" size="small" @click="handleDownload">excel多表头导出</el-button>
        <el-button type="info" size="small" @click="$router.push('/employees/importexcle')">excel导入</el-button>
        <el-button type="primary" size="small">新增员工</el-button>
      </template>
    </header-slot>
    <el-card>
      <el-table :data="tableData" border style="width: 100%">
        <el-table-column prop="date" label="序号" type="index" width="80" sortable></el-table-column>
        <el-table-column prop="username" label="姓名" width="100" sortable></el-table-column>
        <el-table-column prop="staffPhoto" label="头像" width="150" sortable>
          <template slot-scope="scope">
            <!-- <img
              :src="scope.row.staffPhoto?scope.row.staffPhoto:header"
              alt
              class="img"
              @error="imgError"
              ref="img"
            />-->
            <!-- onerror是原生的事件，@error是vue中监听的事件 -->
            <!-- <img
              :src="scope.row.staffPhoto?scope.row.staffPhoto:header"
              alt
              class="img"
              :onerror="imgError"
              ref="img"
            />-->
            <!-- 自定义的事件完成图片的加载 -->
            <!-- <img
              :src="scope.row.staffPhoto?scope.row.staffPhoto:header"
              alt
              class="img"
              v-imgError="header"
            />-->
            <!-- 图片的懒加载 --自己封装的-->
            <!-- <img
              :src="scope.row.staffPhoto?scope.row.staffPhoto:header"
              alt
              class="img"
              v-lazy="imgheader"
              v-imgError="header"
            />-->
            <!-- 通过插件解决图片的懒加载 -->
            <img alt class="img" v-lazy="scope.row.staffPhoto" />
          </template>
        </el-table-column>
        <el-table-column prop="mobile" label="手机号" width="100" sortable></el-table-column>
        <el-table-column prop="workNumber" label="工号" width="100" sortable></el-table-column>
        <el-table-column prop="formOfEmployment" label="聘用形式" width="120" sortable></el-table-column>
        <el-table-column prop="departmentName" label="部门" width="100" sortable></el-table-column>
        <el-table-column prop="timeOfEntry" label="入职时间" width="120" sortable></el-table-column>
        <el-table-column prop="name" label="账户状态" width="120" sortable>
          <template>
            <el-switch disabled></el-switch>
          </template>
        </el-table-column>
        <el-table-column label="操作" sortable fixed="right">
          <template slot-scope="scope">
            <el-button @click="handleClick(scope.row)" type="text" size="small">查看</el-button>
            <el-button type="text" size="small">转正</el-button>
            <el-button type="text" size="small">离职</el-button>
            <el-button type="text" size="small">调岗</el-button>
            <el-button type="text" size="small" @click="LookRole(scope.row.id)">角色</el-button>
            <el-button type="text" size="small">删除</el-button>
          </template>
        </el-table-column>
      </el-table>
    </el-card>
  </div>
</template>

<script>
import HeaderSlot from '@/components/HeaderSlot'
import { emoployeeList } from '@/api/commpany'
import header from '@/assets/images/head.jpg'
import imgheader from '@/assets/images/img.jpeg'
import { parseTime } from '@/utils'
export default {
  name: 'EmployeesView',
  components: {
    HeaderSlot
  },
  props: {},
  data () {
    return {
      tableData: [],
      page: 1,
      size: 10,
      header,
      imgheader,
      tableTitleData: [
        {
          label: '姓名',
          prop: 'username'
        },
        {
          label: '手机号',
          prop: 'mobile'
        },
        {
          label: '入职日期',
          prop: 'timeOfEntry'
        },
        {
          label: '聘用形式',
          prop: 'formOfEmployment'
        },
        {
          label: '转正日期',
          prop: 'correctionTime'
        },
        {
          label: '工号',
          prop: 'workNumber'
        },
        {
          label: '部门',
          prop: 'departmentName'
        }
      ]
    }
  },
  computed: {
    imgError () {
      return 'this.src="' + require('@/assets/images/head.jpg') + '"'
    }
  },
  watch: {},
  created () {
    this.getEmployeeList()
  },
  mounted () {},
  methods: {
    handleClick () {},
    async  getEmployeeList () {
      const { data: { rows } } = await emoployeeList(
        {
          page: this.page,
          size: this.size
        }
      )
      this.tableData = rows
    },
    // imgError () {
    //   this.$refs.img.src = header
    //   console.log(this.$refs.img.src)
    // }
    async  handleDownload () {
      this.downloadLoading = true
      import('@/vendor/Export2Excel').then(excel => {
        const tHeader = this.tableTitleData.map(item => item.label)
        const filterVal = this.tableTitleData.map(item => item.prop)
        const list = this.tableData
        const data = this.formatJson(filterVal, list)
        excel.export_json_to_excel({
          header: tHeader,
          data,
          multiHeader: [['姓名', '主要信息', '', '', '', '', '部门']],
          merges: [
            'A2:A1',
            'B1:BF',
            'G2:G1'
          ]
          // filename: this.filename,
          // autoWidth: this.autoWidth,
          // bookType: this.bookType
        })
        this.downloadLoading = false
      })
    },
    formatJson (filterVal, jsonData) {
      return jsonData.map(v => filterVal.map(j => {
        if (j === 'timestamp') {
          return parseTime(v[j])
        } else {
          return v[j]
        }
      }))
    },
    LookRole (id) {
      this.$router.push('/employees/userInfo?id=' + id)
    }
  }
}
</script>

<style lang="less" scoped>
.header {
  margin-bottom: 20px;
}
.img {
  width: 100px;
  height: 100px;
}
</style>
